<template>
  <div class="funds-list">
    <!-- 添加按钮 -->
    <div>
      <el-form ref="add_data" :model="search_data">
        <!-- 筛选 -->
        <div class="search">
          <el-form-item label="按照序号筛选(点击×清除)：">
            <el-input
              v-model="search_data.id"
              type="text"
              placeholder="请填写序号"
              clearable
              @clear="getProfile"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @click="handleSearch(search_data.id)">
              <el-icon><Search /></el-icon>筛选</el-button>
          </el-form-item>
        </div>
        <el-form-item class="btnRight">
          <el-button
            type="primary"
            size="small"
            @click="handleAdd"
            v-if="user.identify == '超级管理员'"
            ><el-icon><Plus /></el-icon>添加</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- table部分 -->
    <div class="table_container">
      <el-table :data="tableData" style="width: 100%" max-height="450" stripe>
        <el-table-column label="序号" width="80" prop="id"> </el-table-column>
        <el-table-column label="姓名" width="130" prop="name">
        </el-table-column>
        <el-table-column label="性别" width="120" prop="sex">
          <template #default="scope">
            <span style="color: #f56767">{{ scope.row.sex }}</span>
          </template>
        </el-table-column>
        <el-table-column label="年龄" width="120" prop="age">
          <template #default="scope">
            <span style="color: #f56767">{{ scope.row.age }}</span>
          </template>
        </el-table-column>
        <el-table-column label="家庭地址" width="150" prop="addr">
        </el-table-column>
        <el-table-column label="出生日期" width="180" prop="birth">
        </el-table-column>

        <el-table-column
          label="操作"
          prop="operation"
          width="180"
          v-if="user.identify == '超级管理员'"
        >
          <template #default="scope">
            <el-button
              size="small"
              type="warning"
              @click="handleEdit(scope.$index, scope.row)"
            >
              <el-icon><Edit /></el-icon>编辑</el-button
            >
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >
              <el-icon><Delete /></el-icon>删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-row>
        <el-col :span="24"
          ><div class="pagination">
            <el-pagination
              v-model:current-page="paginations.page_index"
              :page-size="paginations.page_size"
              :page-sizes="paginations.page_sizes"
              :layout="paginations.layout"
              :total="paginations.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            /></div
        ></el-col>
      </el-row>
    </div>

    <dialogry-vue
      :dialogry="dialogry"
      @update="getProfile"
      :formData="formData"
    ></dialogry-vue>
  </div>
</template>

<script setup>
import { Timer, Edit, Delete, Plus, Search } from "@element-plus/icons";
import { ref, onMounted, getCurrentInstance, computed } from "vue";
import DialogryVue from "@/components/Dialogry.vue";
import { useStore } from "vuex";
const store = useStore();
const { proxy } = getCurrentInstance();

const user = computed(() => {
  return store.getters.user;
});

const search_data = ref({
      id: ''
});
let filterTableData = ref([]);

const paginations = ref({
  page_index: 1, // 当前位于那页
  total: 0, // 总数
  page_size: 5, // 一页显示多少条
  page_sizes: [5, 10, 15, 20], // 每页显示多少条
  layout: "total, sizes, prev, pager, next, jumper", // 翻页属性
});

let tableData = ref([]);
let allTableData = ref([]);
let dialogry = ref({ show: false, title: "", option: "edit" });
const formData = ref({
  name: "",
  sex: "",
  age: "",
  addr: "",
  birth:'',
  id: "",
});

const getProfile = () => {
  // 获取表格数据
  proxy.$axios
    .get("/userinfo/select")
    .then((res) => {
      allTableData.value = res.data;
      filterTableData.value = res.data;
      // 设置分页数据
      setPaginations();
    })
    .catch((err) => {
      console.log(err);
    });
};
const setPaginations = () => {
  // 分页属性设置
  paginations.value.total = allTableData.value.length;
  paginations.value.page_index = 1;
  paginations.value.page_size = 5;
  // 设置默认的分页数据
  tableData.value = allTableData.value.filter((item, index) => {
    return index < paginations.value.page_size;
  });
};
const handleEdit = (index, row) => {
  // 编辑
  dialogry.value = {
    show: true,
    title: "修改个人信息",
    option: "edit",
  };

  formData.value = {
    name: row.name,
    sex: row.sex,
    age: row.age,
    addr: row.addr,
    birth: row.birth,
    id: row.id,
  };
};

const handleDelete = (index, row) => {
  proxy.$axios.post(`/userinfo/delete/${row.id}`).then((res) => {
    proxy.$message("删除成功！");
    getProfile();
  });
};

const handleAdd = () => {
  // 添加
  dialogry.value = {
    show: true,
    title: "添加个人信息",
    option: "add",
  };

  formData.value = {
    name: "",
    date: "",
    cost: "",
    remark: "",
    id: "",
  };
};

const handleSizeChange = (page_size) => {
  // 切换size
  paginations.value.page_index = 1;
  paginations.value.page_size = page_size;
  tableData.value = allTableData.value.filter((item, index) => {
    return index < page_size;
  });
};

const handleCurrentChange = (page) => {
  // 获取当前页
  let index = paginations.value.page_size * (page - 1);
  // 数据的总数
  let nums = paginations.value.page_size * page;
  // 容器
  let tables = ref([]);
  for (let i = index; i < nums; i++) {
    if (allTableData.value[i]) {
      tables.value.push(allTableData.value[i]);
    }

    tableData.value = tables.value;
  }
};

const handleSearch = (id) => {
  // 筛选
  // 如果任何一个时间为空 就不筛选
  proxy.$axios
  .get(`/userinfo/all/${id}`)
  .then((res) => {
      proxy.$message("查找成功！");
      allTableData.value = res.data;
        filterTableData.value = res.data;
        // 设置分页数据
        setPaginations();
    })
    .catch((err) => {
        console.log(err);
      });
  // const Time = search_data.value.date.getTime();
 

  // allTableData.value = filterTableData.value.filter((item) => {
  //   // let date = new Date(item.createtime);
  //   // let time = date.getTime();
  //   return time >= Time ;
  // });

  // 分页数据
  // setPaginations();
};
onMounted(() => {
  getProfile();
});
</script>

<style lang="less" scoped>
.funds-list {
  margin-left: 200px;
  padding: 30px;
  box-sizing: border-box;

  // 筛选部分
  .search {
    float: left;
    display: flex;
    .el-form-item {
      margin-right: 10px;
    }
  }

  .btnRight {
    float: right;
  }

  // 分页
  .pagination {
    float: right;
    margin-top: 10px;
  }
}
</style>
